<template>
	<view>
		<fa-navbar title="已学课程"></fa-navbar>
		<view class="content">
			<view class="u-tabs">
				<u-tabs :list="list1" @click="clickStatus" :activeStyle="{color:'#000000','font-weight':'600','font-size':'30rpx'}" :inactiveStyle="{color:'#666666','font-size':'28rpx'}"></u-tabs>
			</view>
			<!-- 列表 -->
			<fa-course-item :courseList="courseList" :type="'records'"></fa-course-item>
			<!-- 加载更多 -->
			<view class="u-p-30" v-if="courseList.length">
				<u-loadmore bg-color="#f4f6f8" :status="status" />
			</view>
			<!-- 为空 -->
			<view class="u-m-t-60 u-p-t-60" v-if="is_empty">
				<u-empty text="暂无内容展示" mode="list"></u-empty>
			</view>
			<!-- 回到顶部 -->
			<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
				:custom-style="{ backgroundColor: lightColor }"></u-back-top>
			<!-- 底部导航 -->
		</view>
	</view>
</template>

<script>
	import {
		archives
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [archives],
		computed: {},
		data() {
			return {
				page: 1,
				has_more: true,
				is_empty: false,
				courseList: [],
				list1: [{
					name: '全部',
				}, {
					name: '已学习',
				}, {
					name: '正在学习'
				}, {
					name: '未学习'
				}],
				status:0
			}
		},
		onLoad() {
			this.getCourseList()
		},


		onReachBottom() {
			if (this.has_more) {
				this.page += 1;
				this.getCourseList();
			}
		},
		methods: {
			getCourseList() {
				this.$api.getMyCourseRecord({
					params: {
						page: this.page,
						status: this.status
					},
				}).then((res) => {
					if (res.code) {
						if (this.page === 1) {
							this.courseList = [];
						}
						let courseList = res.data.data
						let pageList = res.data
						this.has_more = pageList.current_page < pageList.last_page;
						this.courseList = [...this.courseList, ...courseList];
						this.is_empty = !this.courseList.length;
					}
				})
			},
			clickStatus(item) {
				this.status = item.index
				this.getCourseList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 188rpx 24rpx 0 24rpx;
		.u-tabs{
			margin-bottom: 32rpx;
			/deep/ &__wrapper__nav__line{
				height: 6rpx !important;
				background-color: #0052D9 !important;
			}
		}
	}
</style>